<template>
	<view class="container" :data-theme="theme">
		<!-- 活动配置信息 -->
		<uni-popup ref="popup" background-color="#fff" type="bottom" :mask-click="false">
			<view class="header">

				<view class="active-config-header">
					<view class="active-header-top">
						<view class="header-top-left" @click="$refs.popup.close()">取消</view>
						<view class="header-top-center">
							<view class="top-center-top">活动配置信息</view>
							<view class="top-center-bottom"> 已选商品{{threeProductList.length}}</view>
						</view>
						<view class="header-top-right" @click="clickConfirm">确认创建</view>
					</view>
				</view>
				<view class="active-config-info">

					<view class="info-item">
						<view class="item-left">活动时间</view>
						<view class="item-right">{{configInfo.activityTime}}</view>
					</view>
					<view class="info-item">
						<view class="item-left">生效时间</view>
						<view class="item-right">00:00:00 <span class="item-right-time"> 至 </span>23:59:59 </view>
					</view>
					<view class="info-item">
						<view class="item-left">满减规则</view>
						<view class="item-right">{{configInfo.giveMethodsName}}</view>
					</view>
					<view class="info-item">
						<view class="item-left">满减阶梯</view>
						<view class="item-right">
							<span v-for="(item,index) in configInfo.discountsList" :key="index"> {{ item}}</span>
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				<!-- 这里是可滚动的内容 -->
				<scroll-view class="scroll-view" scroll-y>
					<view class="scroll-view-inner">
						<view v-if="threeProductList.length > 0" class="panel" v-for="(item,index) in threeProductList"
							:key="index">
							<view class="three-item">
								<!-- 头部商品信息 -->
								<view class="three-top">
									<view class="three-top-product">
										<view class="three-top-left">
											<image :src="item.image" mode=""></image>
											<view class="three-top-center">
												<view class="center-top">
													[{{item.brandName}}]{{item.name}}
												</view>
												<view class="center-bottom">{{item.sku}}</view>
											</view>
										</view>
										<view class="three-top-right" @click="deleteProduct(item)">
											<u-icon name="trash-fill" size="26"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 三级分类空数据 -->
						<u-empty class="empty" v-else mode="data" style="padding: 25%;"
							icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		setThemeColor
	} from '../../../../utils/setTheme';
	import {
		addActivityRegistrationApi
	} from "@/api/marketing.js"
	let app = getApp()
	export default {
		props: {
			threeProductList: {
				type: Array,
				required: () => {
					return []
				}
			},
			// 活动配置信息
			configInfo: {
				type: Object,
				reqired: () => {
					return {}
				}
			},
			// 外层的优惠活动信息
			generalGiftInfo: {
				type: Object,
				required: () => {
					return {}
				}
			},
			// 所有删除的部分品类信息
			partCategoryList: {
				type: Array,
				required: () => {
					return []
				}
			},
		},
		data() {
			return {
				bgColor: "#fff",
				theme: app.globalData.theme,
			}
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		methods: {
			// ---------------------------------活动配置信息--------------------
			handleActiveConfig() {
				this.$refs.popup.open()
			},
			// 确认创建
			clickConfirm() {
				if (!this.threeProductList.length) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none',
						duration: 2000
					});
					return
				}
				this.generalGiftInfo.addEnrolledActivityProductDTOList = this.threeProductList.map(item => {
					return {
						businessSign: 1,
						name: item.name,
						operateCityId: item.operateCityId,
						operateCityName: item.operateCityName,
						price: item.price,
						sku: item.sku,
						skuId: item.id,
					}
				})
				this.generalGiftInfo.addEnrolledActivityProductDTOList.push(...this.partCategoryList)
				uni.showModal({
					title: '提示',
					content: '确认添加该商品优惠信息吗？',
					success: (res) => {
						if (res.confirm == true) {
							this.addActivityRegistration()
						} else {
							uni.showToast({
								title: '已取消',
								icon: 'none',
								duration: 2000
							});
						}
					}
				})
			},
			// 删除商品
			deleteProduct(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除该商品吗？',
					success({
						confirm,
						cancel
					}) {
						if (confirm) {
							that.$emit('byIdCancelStatus', item)
						} else {
							uni.showToast({
								title: '已取消删除',
								icon: 'none',
								duration: 2000
							})
						}
					},
				})

			},
			// --------------------api---------------------------
			// 添加满减商品
			async addActivityRegistration() {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				try {
					let res = await addActivityRegistrationApi(this.generalGiftInfo)
					if (res.code == 200) {
						this.$refs.popup.close()
						uni.showModal({
							title: '提示',
							content: '创建成功点击确认跳转到店铺满减首页',
							showCancel: false,
							success: (res) => {
								if (res.confirm == true) {
									uni.redirectTo({
										url: '/pages/marketing/fullDiscountList/index',
									});
								}
							}
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 1500
						})
					}
				} catch (e) {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 1500
					})
					//TODO handle the exception
					console.log("e", e)
				}
				uni.hideLoading()
			},
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		display: flex;
		flex-direction: column;
		padding: 30rpx;

		// 活动配置信息
		// 改价头部信息
		.active-config-header {
			display: flex;
			flex-direction: column;
			border-bottom: 1rpx solid #eee;

			.active-header-top {
				display: flex;
				justify-content: space-between;

				.header-top-left {
					opacity: .6;

				}

				.header-top-center {
					display: flex;
					flex-direction: column;
					align-items: center;

					.top-center-top {
						font-weight: bold;
					}

					.top-center-bottom {
						padding: 10rpx 0;
						padding-bottom: 20rpx;
						font-size: 26rpx;
					}
				}

				.header-top-right {
					@include main_color(theme)
				}
			}
		}

		.active-config-info {
			padding-top: 10rpx;
			display: flex;
			flex-direction: column;

			.info-item {
				display: flex;
				padding-top: 20rpx;

				.item-left {
					margin-right: 20rpx;
					opacity: .6;
					flex-shrink: 0;
				}

				.item-right {
					.item-right-time {
						margin: 0 10rpx;
					}
				}
			}
		}
	}

	.content {
		flex: 1;
		overflow: hidden;
	}

	.scroll-view {
		height: 350px;
	}

	.scroll-view-inner {

		// 活动商品信息
		.panel {
			display: flex;
			flex-direction: column;
			padding: 20rpx 30rpx;
			border-bottom: 1rpx solid #eee;

			.three-item {
				display: flex;
				flex-direction: column;

				// 商品头部信息
				.three-top {
					display: flex;
					flex-direction: column;

					.three-top-product {
						display: flex;
						justify-content: space-between;
						// padding: 0 20rpx;

						.three-top-left {
							display: flex;

							image {
								width: 80rpx;
								height: 80rpx;
							}

							.three-top-center {
								display: flex;
								flex-direction: column;
								margin-left: 20rpx;

								.center-top {
									font-weight: bold;
								}

								.center-bottom {
									padding-top: 10rpx;
									font-size: 26rpx;
								}
							}
						}

						.three-top-right {}



					}


				}
			}
		}
	}
</style>